<template>
  <div>
<!--    树结构组件-->
    <TreeSelector
      ref="TreeSelectorRef"
      :treeData="treeData"
      搜索按钮名称="搜索"
      提示词placeholder="请点击选择"
      :是否区分大小写="false"
      高亮样式Style="background-color: yellow"
    >
    </TreeSelector>
    <el-button @click="buttonClick">设置需要高亮的节点1</el-button>
    <el-button @click="buttonClick2">设置需要高亮的节点2</el-button>
    <el-button @click="getCheckedKeys">获取选中节点的keys</el-button>
    <el-button @click="getCheckedNodes">获取选中节点的数据</el-button>
    <el-button @click="setCheckedKeys">设置选中节点</el-button>
    <el-button @click="appendSetCheckedKeys">追加设置选中节点</el-button>
  </div>
</template>
<script>
//引用组件
import TreeSelector from '@/components/下拉框/下拉树组件.vue'

export default {
  components:{
    TreeSelector
  },
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级 1 A',
        children: [{
          id: 4,
          label: '二级 1-1 张三B',
          children: [{
            id: 9,
            label: '三级 1-1-1 李四C'
          }, {
            id: 10,
            label: '三级 1-1-2 王五a'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2 赵六c',
        children: [{
          id: 5,
          label: '二级 2-1 张三b'
        }, {
          id: 6,
          label: '二级 2-2 李四a'
        }]
      }, {
        id: 3,
        label: '一级 3 王五D',
        children: [{
          id: 7,
          label: '二级 3-1 赵六d'
        }, {
          id: 8,
          label: '二级 3-2 钱七a'
        }]
      }],
    };
  },
  methods: {
    buttonClick(){
      this.$refs.TreeSelectorRef.需要高亮节点数组 = [1, 2]
    },
    buttonClick2(){
      this.$refs.TreeSelectorRef.需要高亮节点数组 = [3]
    },
    /**
     * 获取选中的节点数据
     */
    getCheckedNodes(){
      let 已选中的节点数据 = this.$refs.TreeSelectorRef.getCheckedNodes()
      console.log(已选中的节点数据)
      alert('通过F12 控制台看获取结果')
    },
    /**
     * 获取选中的节点keys数据
     */
    getCheckedKeys(){
      let 已选中的节点keys = this.$refs.TreeSelectorRef.getCheckedKeys()
      console.log(已选中的节点keys)
      alert('通过F12 控制台看获取结果')

    },
    setCheckedKeys(){
      let checkArr = [1, 2]
      this.$refs.TreeSelectorRef.setCheckedKeys(checkArr)
    },
    /**
     * 追加设置选中的节点
     */
    appendSetCheckedKeys(){
      let checkArr = [1]
      this.$refs.TreeSelectorRef.appendSetCheckedKeys(checkArr)
    }
  }
};
</script>
